<template>
  <div class="flex items-center h-full">
    <n-menu
      v-model:value="activeKey"
      mode="horizontal"
      :options="menuOptions"
      responsive
      style="height: 100%"
    />
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { useRouters } from "@/store/modules/routers.ts";
import type { MenuOption } from "naive-ui";

const routes = router.getRoutes();
const useRoutersStore = useRouters();
useRoutersStore.generateRoutes(routes);
const activeKey = ref<string | undefined>("hear-the-wind-sing");
const menuOptions: MenuOption[] = [
  {
    label: "且听风吟",
    key: "hear-the-wind-sing",
  },
  {
    label: "1973年的弹珠玩具",
    key: "pinball-1973",
  },
  {
    label: "寻羊冒险记",
    key: "a-wild-sheep-chase",
  },
];
</script>

<style scoped lang="scss"></style>
